<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Results</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'bishe/bootstrap5/css/bootstrap.min.css'%}" type="text/css">
    <link rel="stylesheet" href="{% static 'bishe/css/style.css' %}" type="text/css"/>
    <style>
        .card-text p {
            border: 3px solid black;
            border-radius: 5px;
            padding: 5px;
            margin-bottom: 5px;
            color: black;
        }

        .custom-table {
            border-collapse: collapse;
            width: 100%;
        }
        .custom-table th, .custom-table td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        .custom-table th {
            background-color: #f2f2f2;
        }
        .custom-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .custom-table tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
   <a href="{% url 'download_results' %}?result={{ result }}&select_value={{ select_value }}">Download Results</a>
    <div class="container">
        {% if result %}
            {% if select_value == 'mir' %}
                 <div class="card mb-3" style="width: 50rem;">
                    <div class="card-header text-black"  ><h3>miRNA card</h3></div>
                    <div class="card-body text-dark">
                        <div class="card-text">
                            <p>Mature ID: {{ result.Mature_id }}</p>
                            <p>Accession: {{ result.Accession }}</p>
                            <p>Description: {{ result.Description }}</p>
                            <p>Sequence: {{ result.Sequence }}</p>
                            <p>Seed Sequence: {{ result.Seed_seq }}</p>
                            <p>Mature Chromosome: {{ result.mature_chrom }}</p>
                            <p>Pre-miRNA: {{ result.pre_mir }}</p>
                            <p>Evidence: {{ result.evidence }}</p>
                        </div>
                    </div>
                </div>

            {% else %}
                 <table class="custom-table">
                    <thead>
                        <tr>
                            <th scope="col">Mir   </th>
                            <th scope="col">Disease</th>
                            <th scope="col">Category</th>
                            <th scope="col">PMID</th>
                            <th scope="col">Description</th>
                            <th scope="col">Causality</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in result %}
                            <tr>
                                <td>{{ item.mir }}</td>
                                <td>{{ item.disease }}</td>
                                <td>{{ item.category }}</td>
                                <td><a href="https://pubmed.ncbi.nlm.nih.gov/{{ item.pmid }}/">{{ item.pmid }}</a></td>
                                <td>{{ item.description }}</td>
                                <td>{{ item.causality }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        {% elif error_message %}
            <div class="alert alert-warning" role="alert">
                {{ error_message }}
            </div>
        {% endif %}
    </div>
<script src="{% static 'bishe/bootstrap5/js/bootstrap.min.js' %}"></script>
</body>
</html>
